<template>
  <a-layout style="min-height: 1000px">
    <a-layout-content style="background-color: #F2F2E6">
      <div style="padding-bottom: 20px; width: 70%; margin: auto">
        <v-card style="margin-top: 10vh" color="#FFFAF4">
          <v-row>
            <v-col style="padding-left: 3vw; padding-top: 3vh; padding-bottom: 3vh" cols="3">
              <a-avatar shape="square" :size="180" :src="userDTO.profilepic" />
            </v-col>
            <v-col>
              <p style="margin-top: 2vh">
                <span style="font-family: 'Hiragino Sans GB',sans-serif; font-weight: bolder; font-size: 36px">{{userDTO.nickname}}</span>
                <span style="margin-left: 2vw; font-size: 18px; white-space: nowrap; font-family: BlinkMacSystemFont,sans-serif"
                      v-if="userDTO.introduction !== null">
                  {{userDTO.introduction}}
                </span>
              </p>
              <p>
                <span style="font-family: 'Hiragino Sans GB',sans-serif; font-weight: bolder; font-size: 16px">
                  粉丝
                </span>
                <span style="font-family: '华文楷体',sans-serif; font-weight: bolder; font-size: 16px; margin-right: 2vw">
                  {{getDisplayData(fansCount)}}
                </span>
                <span style="font-family: 'Hiragino Sans GB',sans-serif; font-weight: bolder; font-size: 16px">
                  收藏
                </span>
                <span style="font-family: '华文楷体',sans-serif; font-weight: bolder; font-size: 16px; margin-right: 2vw">
                  {{getDisplayData(collectCount)}}
                </span>
                <span style="font-family: 'Hiragino Sans GB',sans-serif; font-weight: bolder; font-size: 16px" v-if="true">
                  评论
                </span>
                <span style="font-family: '华文楷体',sans-serif; font-weight: bolder; font-size: 16px; margin-right: 2vw" v-if="true">
                  {{getDisplayData(commentCount)}}
                </span>
              </p>
              <v-row>
                <v-col cols="1" v-if="userDTO.sex !== null && userDTO.sex !== '保密'">
                  <v-icon style="padding-top: 2vh" v-if="userDTO.sex === '男' || userDTO.sex === '女'">{{userDTO.sex === '男' ? 'mdi-gender-male' : 'mdi-gender-female'}}</v-icon>

                </v-col>
                <v-col>
                  <v-treeview
                    hoverable
                    v-if="info[0].children.length !== 0"
                    dense
                    style="font-family: '微软雅黑 Light',sans-serif; font-weight: bolder"
                    rounded
                    :items="info"
                  ></v-treeview>
                </v-col>
              </v-row>

            </v-col>
            <v-col>
              <v-row type="flex" justify="end" style="padding-top: 3vh; padding-right: 3vw">
                <v-btn rounded
                       large
                       @click="followAction"
                       :color="followState ? '#89B8CA' : '#FFFAF4'"
                       v-if="!isMine">
                  <span style="font-family: '华文楷体',sans-serif; font-size: 18px; font-weight: bold">{{followState ? '已关注' : '关注'}}</span>
                  <v-icon>{{followState ? 'mdi-check-all' : 'mdi-cursor-default-click-outline'}}</v-icon>
                </v-btn>
                <v-btn rounded
                       large
                       @click="$router.push('/personal/edit')"
                       color="#89B8CA"
                       v-else>
                  <span style="font-family: '华文楷体',sans-serif; font-size: 18px; font-weight: bold">编辑资料
                     <v-icon>mdi-square-edit-outline</v-icon>
                  </span>

                </v-btn>
              </v-row>
            </v-col>
          </v-row>

        </v-card>
        <v-card style="margin-top: 3vh">
          <v-tabs
            v-model="tab"
            background-color="#FFFAF4"
            grow
          >
            <v-tab style="font-family: 等线,serif; font-weight: bolder">
              创意
              <span>&nbsp;({{listCreativity.length}})</span>
            </v-tab>
            <v-tab style="font-family: 等线,serif; font-weight: bolder">
              解决方案
              <span>&nbsp;({{listSolution.length}})</span>
            </v-tab>

          </v-tabs>
          <v-tabs-items v-model="tab">

            <v-tab-item>
              <v-card color="au_white" flat>
                <v-card-text>
                  <a-spin tip="Loading..." :spinning="searchLoading">
                    <a-list item-layout="vertical" size="large" :data-source="listCreativity" :pagination="pagination_S" :split="false">
                      <div slot="footer"><b>MindFall</b> Personal Creativity —— 个人创意</div>
                      <a-list-item slot="renderItem" key="item.id" slot-scope="item, index" style="padding-top: 10px; padding-bottom: 15px">
                        <v-card rounded="xl" color="#FFFDF8" class="elevation-0">
                          <v-card-text style="padding-left: 20px; padding-bottom: 0; padding-top: 30px">
                            <!--                    创意名 特征-->
                            <v-row style="padding-left: 1vw">
                              <!--                      创意名-->
                              <a class="font-weight-bold text-sm-h6 " @click="visitCreativity(item)">{{item.name}}</a>
                              <v-spacer></v-spacer>
                              <a-tag
                                v-for="(item, index) in item.feature"
                                :key="index"
                                v-if="index <= 2"
                                color="#f8ebd8"
                                style="height: 30px; padding-top:5px; font-size: 14px; margin-right: 2vh; color: #2C2E2D; font-weight:bold; font-family: '华文楷体',sans-serif">
                                {{ item }}
                              </a-tag>

                            </v-row>
                            <!--                    创意详情-->
                            <v-row style="padding-left: 1vw; padding-right: 2vw; padding-top: 2vh">
                              <p>{{item.detail}}</p>
                            </v-row>
                            <!--                    创意统计信息 日期-->
                            <v-row>
                              <v-col>
                                <a-icon type="eye" />&emsp;{{getDisplayData(item.view)}}&emsp;&emsp;&emsp;
                                <a-icon type="star" />&emsp;{{getDisplayData(item.collections)}}&emsp;&emsp;&emsp;
                                <a-icon type="message" />&emsp;{{getDisplayData(item.comments)}}
                              </v-col>
                              <v-col>
                                <v-row type="flex" justify="end" style="margin-top: 3px; padding-right: 2vw">
                                  <a-icon type="calendar" style="margin-top: 3px"/>&emsp;{{ item.createTime }}
                                </v-row>
                              </v-col>
                            </v-row>
                          </v-card-text>
                        </v-card>
                      </a-list-item>
                    </a-list>
                  </a-spin>
                </v-card-text>
              </v-card>
            </v-tab-item>

            <v-tab-item>
              <v-card color="au_white" flat>
                <v-card-text>
                  <a-spin tip="Loading..." :spinning="searchLoading">
                    <a-list item-layout="vertical" size="large" :data-source="listSolution" :pagination="pagination_U" :split="false">
                      <div slot="footer"><b>MindFall</b> Personal Solution —— 个人解决方案</div>
                      <!--              搜索结果-->
                      <a-list-item slot="renderItem" key="item.id" slot-scope="item, index" style="padding-top: 10px; padding-bottom: 15px">
                        <v-card rounded="xl" color="#FFFDF8" class="elevation-0">
                          <v-card-text style="padding-left: 20px; padding-bottom: 0; padding-top: 30px">
                            <!--                    方案名 评分-->
                            <v-row style="padding-left: 1vw">
                              <!--                      方案名-->
                              <a class="font-weight-bold text-sm-h6 " @click="visit(item)">{{item.name}}</a>
                              <v-spacer></v-spacer>
                              <!--                      评分-->
                              <v-rating
                                v-if="item.score !== null"
                                v-model="item.score"
                                background-color="main_1"
                                color="main_1"
                                dense
                                readonly
                                half-increments
                                hover
                                style="padding-right: 1vw"
                                size="25"></v-rating>
                              <span v-if="item.score !== null" class="black--text text--lighten-4 mr-4" style="font-size: 15px; padding-top: 3px; padding-right: 2vw">({{ item.score }})</span>
                              <span v-else class="black--text text--lighten-4 mr-4" style="font-size: 15px; padding-top: 3px; padding-right: 2vw">暂无评分</span>
                            </v-row>
                            <!--                    方案详情-->
                            <v-row style="padding-left: 1vw; padding-right: 2vw; padding-top: 2vh">
                              <p>{{item.detail}}</p>
                            </v-row>
                            <!--                    方案统计信息 日期-->
                            <v-row>
                              <v-col>
                                <a-icon type="eye" />&emsp;{{getDisplayData(item.view)}}&emsp;&emsp;&emsp;
                                <a-icon type="star" />&emsp;{{getDisplayData(item.collections)}}&emsp;&emsp;&emsp;
                                <a-icon type="message" />&emsp;{{getDisplayData(item.comments)}}
                              </v-col>
                              <v-col>
                                <v-row type="flex" justify="end" style="margin-top: 3px; padding-right: 2vw">
                                  <a-icon type="calendar" style="margin-top: 3px"/>&emsp;{{ item.createTime }}
                                </v-row>
                              </v-col>
                            </v-row>
                          </v-card-text>
                        </v-card>
                      </a-list-item>
                    </a-list>
                  </a-spin>
                </v-card-text>
              </v-card>
            </v-tab-item>

          </v-tabs-items>
        </v-card>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import request from "../utils/request";

  export default {
    name: "User_Detail",
    created() {
      this.getFansCount()
      this.userId = this.parseJSONCapture(this.decodeCapture(this.$route.query.user))
      this.checkFollowState()
    },
    computed:{
    },

    data () {
      return {
        searchLoading: false,
        userId: -1, // 当前页面用户id
        userDTO: {}, // 当前页面用户信息
        followState: false, // 是否关注
        followObj: {}, // 关注DTO
        fansCount: 0, // 粉丝数
        commentCount: 0, // 评论数
        collectCount: 0, // 收藏数
        info: [
          {
            id: 1,
            name: '查看详细资料',
            children: [],
          },
        ],
        tab: null,
        isMine: false,
        items: [
          '创意', '解决方案',
        ],
        listCreativity: [],
        listSolution: [],
        pagination_U: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        }, // 创意分页
        pagination_S: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        },
      }
    }, // 方案分页
    methods:{
      getDisplayData(data){
        if(data >= 10000) {
          return data = Math.floor(data/10000) + "万+"
        }
        else
          return data
      },
      // 关注按钮操作
      followAction(){
        if (this.followState === false)
          this.follow()
        else
          this.cancelFollow()
      },
      follow(){
        this.followObj.userId = -1
        this.followObj.fouserId = this.userDTO.id
        request.post('/follow/insertFollow', this.followObj).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('关注成功')
            this.followState = true
          }
          else {
            this.sendWarnMessage(res.msg)
            this.checkFollowState()
          }
        })
      },
      // 取消关注
      cancelFollow(){
        request.delete('/follow/deleteFollow', {
          params:{
            fouserId: this.userDTO.id
          }
        }).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('取消关注成功')
            this.followState = false
          }
          else {
            this.sendWarnMessage(res.msg)
            this.checkFollowState()
          }
        })
      },

      getFansCount(){
        request.get('/follow/findOtherFollower/' + this.parseJSONCapture(this.decodeCapture(this.$route.query.user))).then(res => {
          if (res.code === '200'){
            this.fansCount = res.data.length
          }
        })
      },
      parseJSONCapture(str) {
        try {return JSON.parse(str);}
        catch (e) {
          this.$router.push('/user404')
        }
      },
      decodeCapture(str) {
        try {return decodeURIComponent(window.atob(str))}
        catch (e) {
          this.$router.push('/user404')
        }
      },
      // 加载作者信息
      loadDetails(){
        if (!this.$route.query.user)
          this.$router.push('/user404')
        let uid = this.parseJSONCapture(this.decodeCapture(this.$route.query.user))
        return request.get('/user/home', {params:{id: uid}})
      },
      // 检查是否关注
      async checkFollowState(){
        this.info[0].children = []
        let result = await this.loadDetails()
        if (result.code === '200' && result.data !== null){
          document.title = '用户主页-' + result.data.userDTO.nickname
          this.userDTO = result.data.userDTO
          this.isMine = result.data.mine
          if (result.data.address !== null)
            this.info[0].children.push({id: 2, name: '居住地：' + result.data.address})
          if (result.data.occupation !== null)
            this.info[0].children.push({id: 2, name: '所在行业：' + result.data.occupation})
          this.userDTO.sex = result.data.sex
          this.userDTO.introduction = result.data.introduction
          this.listCreativity = result.data.creativeHomeDTOS
          this.listSolution = result.data.solutionAllDTOS
          for (let j = 0; j < result.data.creativeHomeDTOS.length; j++){
            this.commentCount += result.data.creativeHomeDTOS[j].comments
            this.collectCount += result.data.creativeHomeDTOS[j].collections
          }
          for (let k = 0; k < result.data.solutionAllDTOS.length; k++){
            this.commentCount += result.data.solutionAllDTOS[k].comments
            this.collectCount += result.data.solutionAllDTOS[k].collections
          }
          await request.get('/follow/findFollowee').then(res => {
            if (res.code === '200'){
              let tmp = []
              for (let i = 0; i < res.data.length; i++){
                tmp.push(res.data[i].userDTO.id)
              }
              this.followState = tmp.indexOf(result.data.userDTO.id) !== -1
            }
          })
        }
        else {
          this.$router.push('/user404')
        }
      },

      visit(item){ //打开一个方案并跳转
        request.get('/solution', {
          params: {
            id: item.id
          }
        }).then(res =>{
          if (res.code === '200'){
            if(res.data.statement !== '已发布'){
              let notfoundUrl = this.$router.resolve({path: "/solution404"});
              window.open(notfoundUrl.href, '_blank');
            }
            else{
              request.post('/solution/updateView', {id: parseInt(item.id)}).then(res => {
                let routeUrl = this.$router.resolve({
                  path: "/solutionInfo",
                  query:{solution: window.btoa(window.encodeURIComponent(item.id))}
                });
                window.open(routeUrl.href, '_blank');
              })
            }
          }else {
            let notfoundUrl = this.$router.resolve({path: "/solution404"});
            window.open(notfoundUrl.href, '_blank');
          }
        })
      },
      visitCreativity(item){
        request.get('/creative/' + item.id).then(res =>{
          if (res.code === '200'){
            if(res.data.statement !== '已发布'){
              let notfoundUrl = this.$router.resolve({path: "/creative404"});
              window.open(notfoundUrl.href, '_blank');
            }
            else{
              request.post('/creative/updateView', {id: parseInt(item.id)}).then(res => {
                let routeUrl = this.$router.resolve({
                  path: "/creativeInfo",
                  query:{creative: window.btoa(window.encodeURIComponent(item.id))}
                });
                window.open(routeUrl.href, '_blank');
              })
            }
          }else {
            let notfoundUrl = this.$router.resolve({path: "/creative404"});
            window.open(notfoundUrl.href, '_blank');
          }
        })
      }
    }
  }
</script>

<style>
  .basil {
    background-color: #F2F2E6 !important;
  }
  .basil--text {
    color: #89B8CA !important;
  }
  .v-application ul, .v-application ol{
    padding-left: 0 !important;
  }
  .ant-modal-body{
    padding-bottom: 5px !important;
  }
  .el-collapse-item__content{
    padding-bottom: 2vh !important;
    background-color: #FFFAF4;
  }
  .el-collapse{
    background-color: #FFFAF4;
    border-top: transparent !important;
    border-bottom: transparent !important;
  }
  .el-collapse-item__header{
    height: 4vh;
    background-color: #FFFAF4;
    border-bottom: transparent !important;
  }
  .v-application ul, .v-application ol{
    padding-left: 0 !important;
  }
  a:hover{
    color: #c1cbd7;
  }

</style>
